<template>
  <div class="mester">
    <ul>
      <li>
        <ChromeFilled style="fontSize:120px;color:#40c9c6;" />
        <div class="text">
          <p>产品管理</p>
          <p>{{data.products}}</p>
        </div>
      </li>
      <li>
        <FileTextFilled style="fontSize:120px;color:#36a3f7;" />
        <div class="text">
          <p>Banner 管理</p>
          <p>{{data.banner}}</p>
        </div>
      </li>
      <li>
        <SnippetsFilled style="fontSize:120px;color:#f4516c;" />
        <div class="text">
          <p>关于我们</p>
          <p>{{data.about}}</p>
        </div>
      </li>
      <li>
        <UsbFilled style="fontSize:120px;color:#34bfa3;" />
        <div class="text">
          <p>用户</p>
          <p>{{data.ok}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {
  ChromeOutlined,
  CopyOutlined,
  FormOutlined,
  UserOutlined,
  ChromeFilled,
  FileTextFilled,
  SnippetsFilled,
  UsbFilled
} from "@ant-design/icons-vue";

import { getproducts, getbanner, getabout, getok } from "../../api/user_api";

import { reactive } from "vue";

type list = {
  products: number;
  banner: number;
  about: number;
  ok: number;
};
const data: list = reactive({
  products: 0,
  banner: 0,
  about: 0,
  ok: 0,
});
Promise.all([getproducts(), getbanner(), getabout(), getok()]).then(
  (res: any) => {
    // console.log(res);
    data.products = res[0].data
    data.banner = res[1].data
    data.about = res[2].data
    data.ok = res[3].data
  }
);
</script>

<style scoped lang="scss">
.mester {
  width: 100%;
  ul {
    display: flex;
    list-style: none;
    justify-content: space-around;
    li {
      width: 300px;
      height: 200px;
      background: rgba(204, 204, 204, 0.315);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      .anticon {
        font-size: 150px;
      }
      .text {
        font-size: 24px;
        color: black;
      }
      &:hover{
          .anticon{
              background: skyblue;
              color: orange;
          }
      }
    }
  }
}
</style>